/*
* 资源管理
*/
import React from 'react';
import BreadcrumbCustom from '../BreadcrumbCustom';
import {Row, Col, Tree, Spin, Divider, Modal, message} from 'antd';
import WrappedResourceForms from "./ResourceForms";
import * as Request from '../../Server/SystemManger';
import * as Utils from '../../common/utils';
import * as Const from '../../common/const';
import {AuthIcon, AuthButton} from '../auth/OperationAuth';

require('./customer.css');


const TreeNode = Tree.TreeNode;
const confirm = Modal.confirm;

let permissions = undefined;

class ResourceManager extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            treeData: [],
            permission: undefined,
            expandedKeys: [],
            title: undefined,
            autoExpandParent: true,
            loading: false,
        };
        permissions = JSON.parse(localStorage.getItem('user')).permission;
    }

    componentDidMount() {
        this.initTreeData(true);
    }

    componentWillUnmount() {
        this.setState = () => {
            return;
        };
    }

    initTreeData = (flag = false) => {
        this.setState({loading: true});
        //初始化树结构数据
        Request.getAllPermissions().then(res => {
            if (res && Const.REQUEST_SUCCESS == res.code) {
                const treeData = Utils.getTreeDataForNesting(res.data);
                const expandedKeys = flag ? [treeData[0] && treeData[0].key] : this.state.expandedKeys
                this.setState({
                    treeData: treeData,
                    expandedKeys: expandedKeys,
                    loading: false
                });
            }

        });
    }

    edit = (id) => {
        this.setState({loading: true});
        Request.getPermissionById(id).then(res => {
            if (res && Const.REQUEST_SUCCESS == res.code) {
                this.setState({
                    visible: true,
                    permission: res.data,
                    title: '编辑资源',
                    loading: false
                });
            }
        });
    }

    delete = (id) => {
        const _this = this;
        confirm({
            title: '删除提示',
            content: '确认删除该条信息',
            maskClosable: true,
            okText: '确定',
            okType: 'primary',
            cancelText: '取消',
            onOk: () => {
                Request.deletePermissionById(id).then(res => {
                    if (res && Const.REQUEST_SUCCESS == res.code) {
                        message.success(Const.DELETE_SUCCESS_TIP, Const.AUTO_DISAPPEAR_TIME);
                        _this.initTreeData();
                    }
                });
            }
        });
    }
    renderTreeNodes = (data) => {
        return data.map((item) => {
            if (item.children && item.children.length) {
                return (
                    <TreeNode title={<span>
                                        <span className={'common-font'}>{item.title}</span>
                                        <AuthIcon title={'编辑'} type={'edit'} className={'ant-tree-node-button'}
                                                  onClick={this.edit.bind(this, item.id)}
                                                  permission={'permission:save'}></AuthIcon>
                                        <AuthIcon title={'删除'} type={'delete'} className={'ant-tree-node-button'}
                                                  onClick={this.delete.bind(this, item.id)}
                                                  permission={'permission:delete'}></AuthIcon>
                                        <span style={{'margin': '0 10px'}}>
                                            <Divider dashed orientation={'left'} type={'vertical'}/>
                                            <Divider dashed orientation={'left'} type={'vertical'}/>
                                        </span>
                                        <span
                                            className={item.type == 1 ? 'menu-marker' : 'button-marker'}>{item.type == 1 ? '菜单' : '按钮'}</span>
                                        </span>}
                              key={item.key}
                              className={'span-automatic-transfer'}
                    >
                        {this.renderTreeNodes(item.children)}
                    </TreeNode>
                );
            }
            delete item.children;
            return <TreeNode title={<span>
                                        <span className={'common-font'}>{item.title}</span>
                                        <AuthIcon title={'编辑'} type={'edit'} className={'ant-tree-node-button'}
                                                  onClick={this.edit.bind(this, item.id)}
                                                  permission={'permission:save'}></AuthIcon>
                                        <AuthIcon title={'删除'} type={'delete'} className={'ant-tree-node-button'}
                                                  onClick={this.delete.bind(this, item.id)}
                                                  permission={'permission:delete'}></AuthIcon>
                                        <span style={{'margin': '0 10px'}}>
                                            <Divider dashed orientation={'left'} type={'vertical'}/>
                                            <Divider dashed orientation={'left'} type={'vertical'}/>
                                        </span>
                                        <span
                                            className={item.type == 1 ? 'menu-marker' : 'button-marker'}>{item.type == 1 ? '菜单' : '按钮'}</span>
                                    </span>}
                             key={item.key}
                             className={'span-automatic-transfer'}
            />;
        });
    }

    onExpand = (expandedKeys) => {
        this.setState({expandedKeys, autoExpandParent: false});
    }
    /*
    *添加
    */
    addResources = () => {
        this.setState({
            visible: true,
            permission: undefined,
            title: '添加资源',
        });
    }
    /*
    * 取消
    */
    cancel = (flag = false) => {
        if (flag && typeof flag !== 'object') {
            this.initTreeData();
        }
        this.setState({
            visible: false,
        });
    };

    render() {

        return (
            <div style={{height: '100%'}}>
                <Spin spinning={this.state.loading} >
                    <BreadcrumbCustom first={"资源管理"}/>
                    <Row span={2} className="button-margin">
                        <AuthButton size={'large'} onClick={this.addResources} permission={'permission:save'}>
                            添加资源
                        </AuthButton>
                    </Row>
                    <Row>
                        <Col>
                            <Tree
                                showLine
                                autoExpandParent={true}
                                expandedKeys={this.state.expandedKeys}
                                onExpand={this.onExpand}
                                autoExpandParent={this.state.autoExpandParent}
                            >
                                {this.renderTreeNodes(this.state.treeData)}
                            </Tree>
                        </Col>
                    </Row>
                    <Modal
                        title={this.state.title}
                        visible={this.state.visible}
                        footer={null}
                        onCancel={this.cancel}
                        maskClosable={false}
                        destroyOnClose={true}
                        centered={true}
                    >
                        <WrappedResourceForms cancel={this.cancel} permission={this.state.permission}
                                              treeData={this.state.treeData}/>
                    </Modal>
                </Spin>
                <style>
                    {`.ant-spin-nested-loading,.ant-spin-spinning{height:100%;}
                       .button-marker, .menu-marker{
                            cursor:auto !important;
                       }
                    `}
                </style>
            </div>
        )
    }
}

export default ResourceManager;